<template>
  <!-- 导航栏 -->
  <navbarback></navbarback>
  <view class="viewpoint">
    <view class="top">
      <view class="left">
        <view class="image">
          <image src="../../static/images/person_3.png" mode="scaleToFill" />
        </view>
        <view class="info">
          <view style="width: 100%; margin: 0rpx 5rpx"
            ><text style="font-size: 16rpx; color: black; font-weight: bold"
              >{{ infoform.name }}
              <text style="color: #b9b9b9; font-size: 14rpx"
                >{{ infoform.age }}岁 {{ infoform.sex }}</text
              ></text
            ></view
          >
          <view class="disease_item">{{ infoform.disease }} </view>
        </view>
      </view>
      <view class="right">
        <view class="I">电话：{{ infoform.phoneNumber }}</view>
        <view class="I">地址：{{ infoform.address }}</view>
        <view class="I">身份证：{{ infoform.idNumber }}</view>
      </view>
    </view>
    <scroll-view class="visit-list" scroll-y :show-scrollbar="false">
      <view v-if="visitlist.length != 0">
        <view
          class="visit-item"
          v-for="(visitItem, index) in visitlist"
          :key="index"
          @tap="toVisitDesc(visitItem)"
        >
          <view class="visit-ribbon visit-due" v-if="visitItem.visitSign == 2">
            <text>已逾期</text>
          </view>
          <view class="visit-ribbon" v-if="visitItem.visitSign == 1">
            <text>已完成</text>
          </view>
          <view class="visit-ribbon visit-save" v-if="visitItem.visitSign == 0">
            <text>存草稿</text>
          </view>
          <view class="visit-item-text">
            <text>{{ visitItem.name }}</text>
          </view>
          <view class="visit-item-text">
            <text>{{ visitItem.sex }}</text>
          </view>
          <view class="visit-item-text">
            <text>{{ visitItem.age }}岁</text>
          </view>
          <view class="visit-item-text">
            <text>{{ visitItem.disease }}</text>
          </view>
          <view class="visit-item-text">
            <text>{{ visitItem.visitTime }}</text>
          </view>
        </view>
      </view>
      <view v-else>暂无记录</view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'
import navbarback from '@/component/navbarback2.vue'
import { getvisitlist } from '@/services/vist'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { useMemberStore } from '@/stores/index'
import { useVisitStore } from '@/stores/modules/visit'
import { formatTime } from '@/utils/time'
const query = defineProps<{ params: any }>()
const infoform = ref()
const MemberStore = useMemberStore()
infoform.value = JSON.parse(query.params)

interface VisitItem {
  id: number //随访id
  name: string //患者姓名
  sex: string //患者性别
  age: string //患者年龄
  disease: string //患者疾病
  doctorId: number //医生id
  patientId: number //患者id
  checkId: number //体检信息id
  symptoms: string //随访患者症状
  drugUsage: string //用药情况
  visitTime: string //随访时间
  visitWay: string //随访方式
  livingHabit: string //生活习惯
  visitSign: number //是否完成随访，0代表草稿，1代表未完成随访，2代表完成随访
  remark: string //备注
}
const visitlist = ref<VisitItem[]>([])

const getlist = async () => {
  const res = await getvisitlist({
    value: infoform.value.idNumber,
    id: MemberStore.profile.doctorInfo.id,
  })
  console.log(res.data)
  visitlist.value = res.data.visitVOList
}
//跳转到随访详情页
const visitStore = useVisitStore()
const toVisitDesc = (visitItem: VisitItem) => {
  visitStore.setVisit(visitItem)
  uni.navigateTo({ url: '/pages/index/visit/components/VisitDesc' })
}
onLoad(() => {
  getlist()
})
onShow(() => {})
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #f4f4f4;
}
.viewpoint {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 50rpx);
  padding: 10rpx 15rpx;
  width: 100%;
  position: relative;
  .top {
    width: 100%;
    height: 80rpx;
    background-color: #fff;
    display: flex;
    padding: 5rpx;

    .left,
    .right {
      height: 100%;
      flex: 1;
    }
    .left {
      display: flex;
      justify-content: center;
      align-items: center;
      .image {
        height: 60rpx;
        width: 70rpx;
      }
      .info {
        flex: 1;
        height: 100%;
        .disease_item {
          margin: 0 5rpx;
          width: auto;
          background-color: #00a8ff;
          color: #fff;
          padding: 3rpx;
          font-weight: bold;
          border-radius: 4rpx;
          font-size: 12rpx;
        }
      }
    }
    .right {
      .I {
        margin: 4rpx 0;
        font-size: 14rpx;
        font-weight: bold;
        color: #b5b2b2;
      }
    }
  }
  .visit-list {
    margin-top: 5rpx;
    width: 100%;
    .visit-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      position: relative;
      overflow: hidden;
      height: 50rpx;
      padding-left: 50rpx;
      padding-right: 10rpx;
      margin-bottom: 4rpx;
      .visit-ribbon {
        background-color: #1890ff;
        overflow: hidden;
        white-space: nowrap;
        position: absolute;
        left: -8rpx; // 根据实际调整即可
        top: 8rpx; // 根据实际调整即可
        transform: rotate(-45deg);
        box-shadow: 0 0 1rpx #888;
        text {
          color: #fff;
          padding: 0rpx 10rpx;
          display: block;
          font-size: 8rpx;
        }
      }
      .visit-due {
        background-color: red;
      }
      .visit-save {
        background-color: #61666d;
      }
    }
    .visit-item-text {
      width: 20%;
      overflow: hidden;
      font-size: 12rpx;
      color: #333333;
    }
  }
}
</style>